<template>
  <div class="test">
    <p>评论模块管理</p>
    <!-- 按钮 -->
    <div class="btns">
      <el-button size="small" type="primary" @click="toAdd">添加</el-button>
    </div>
    <!-- 表格 -->

    <el-table :data="list" style="width: 100%" size="small">
      <el-table-column type="index" label="序号" width ="180px"> </el-table-column>
      <el-table-column prop="content" label="内容" > </el-table-column>
      <el-table-column prop="comment_date" label="评论时间"> </el-table-column>
      <el-table-column prop="status" label="状态"> </el-table-column>
      <el-table-column prop="article_id" label="文章来源"> </el-table-column>
      <el-table-column prop="user_id" label="用户来源"> </el-table-column>    
      <el-table-column label="操作" width="150" align="center"> 
        <template v-slot="scope">
          <el-button size="small" type="danger" @click="del(scope.row)">删除</el-button>
          <el-button size="small" type="primary" @click="edit(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 模态框 -->
    <el-dialog
      title="提示"
      class="customer_modal"
    
      :visible.sync="dialogVisible"
      width="60%"
    >
      {{form}}
      <el-form :model="form" label-width="100px">
        <el-form-item label="内容" >
          <el-input v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item label="评论时间" >
          <el-input v-model="form.comment_id"></el-input>
        </el-form-item>
        
        <el-form-item label="状态" >
          <el-input v-model="form.status"></el-input>
        </el-form-item>
        
        <el-form-item label="文章来源" >
          <el-input v-model="form.article_id"></el-input>
        </el-form-item>
        
        <el-form-item label="用户来源" >
          <el-input v-model="form.user_id"></el-input>
        </el-form-item>
      </el-form>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="save" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 小星星 -->
    <div class="star" id="app">
    <el-rate
      v-model="value"
      show-text>
    </el-rate>
    </div>

    <div class="foot">
      <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
        <!-- <div
            height: 100%;
            width: 100%;
            background-color: #f2f5f6;
            box-shadow: 0 0 6px rgba(0,0,0, .12);
            text-align: center;
            line-height: 40px;
            color: #1989fa;
          }">
          回到顶端
        </div> -->
        <p id="back-to-top"><a href="#top"><font color="#5f33ff">返回顶部</font> </a></p>
      </el-backtop>
    </div>   
  </div>

  
  
</template>

<style scoped>
.foot{
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 0 6px rgba(0,0,0, .12);
  text-align: center;
  line-height: 40px;
  padding-top: 100%;
  padding-left: 50%;
  font-size: 14px;
  color: #ff84f5;
}

.foot p{
  color: #ff84f5;
}
.test p{
  float: left;
  color: #fff;
  margin: 14px auto;
  padding-left: 20px;
  font-size: 16px;
}

.star{
  text-align: center;
  width: 100%;
  height: 50px;
  padding: 20px;
}
</style>



<script>
  export default {
    data() {
      return {
        value: null
      }
    }
  }
</script>

<script>
// 导入request , 浏览器提供给我们的用于与后台进行交互的工具 api
import {get,post} from '@/utils/request'
export default {
  data (){
    return {
      form:{},
      list:[],
      dialogVisible:false
    }
  },
  created(){
    this.loadData();
  },
  methods:{
    // 保存
    save(){
      let url = "/cms_Comment/saveOrUpdate"
      post(url,this.form).then( (response)=>{
        // 1. 模态框关闭
        this.dialogVisible = false;
        // 2. 提示
        this.$message({type:"success",message:response.message})
        // 3. 刷新
        this.loadData();
      } )
    },
    // 删除
    del(row){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url = "/cms_Comment/deleteById"
          post(url,{id:row.id}).then( (response)=>{
            // 1. 提示
            this.$message({type:"success",message:response.message})
            // 2. 刷新 
            this.loadData();
          } )
        })
    },
    // 编辑
    edit(row){
      this.form = row;
      this.dialogVisible = true;
    },
    // 加载数据
    loadData(){
      let url = "/cms_Comment/findAll";
      get(url).then( (response)=>{
        // response就是后端返回给我们的Message{status,message,data,timestamp}
        this.list = response.data;
      } );
    },
    toAdd(){
      this.dialogVisible = true;
    },
    data(){
      return{
        list:[],
        dialogVisible:false
      }
    },
    toDelete(){
     this.dialogVisible = true;
    },
    toSelect(){
      this.dialogVisible = true;
    },


    function(){
        //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
        $(function () {
            $(window).scroll(function(){
                if ($(window).scrollTop()>100){
                    $("#back-to-top").fadeIn(1500);
                }
                else
                {
                    $("#back-to-top").fadeOut(1500);
                }
            });
 
            //当点击跳转链接后，回到页面顶部位置
            $("#back-to-top").click(function(){
                if ($('html').scrollTop()) {
                    $('html').animate({ scrollTop: 0 }, 100);//动画效果
                    return false;
                }
                $('body').animate({ scrollTop: 0 }, 100);
                return false;
            });
        });
    }

  }
}
</script>

<style scoped>
.titles{
  float: left;
  margin: 0 auto;
  padding-left: 15px;
}

.titles p{
  font-size: 16px;
	color: #fff;
}

.test{
  background-color: #a59aca;
  border-radius: 5px;
  height: 50px;
}

.btns{
  float: right;
  margin: 9px auto;
  padding-right: 10px;
}

.inputs{
  float: left;
  margin: auto;
}

.dialog{
  margin: auto;
  text-align: center;
  overflow: hidden;
  
}
</style>


